<template>
  <div class="home">
    <!-- 搜索框 -->
    <div v-if="bool">
      <van-search
        disabled
        @click="jumpTo"
        shape="round"
        v-model="value"
        placeholder="请输入搜索关键词"
      />
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(v, k) in banner" :key="k"
          ><img :src="v.image_url" alt="" width="100%" height="1.66rem"
        /></van-swipe-item>
      </van-swipe>
      <!-- 顶部导航 -->
      <van-grid :column-num="5">
        <van-grid-item
          v-for="(v, k) in channel"
          :key="k"
          :icon="v.icon_url"
          :text="v.name"
          @click="fun(v.id)"
        />
      </van-grid>
      <!-- 品牌制造商直供 -->
      <div class="brand">
        <h1>品牌制造商直供</h1>
        <div
          class="b_img"
          v-for="(v, k) in brandList"
          :key="k"
          @click="brand(v.id)"
        >
          <img :src="v.pic_url" alt="" />
          <div class="b_content">
            <p class="p1">{{ v.name }}</p>
            <p class="p2">¥ {{ v.floor_price.toFixed(2) }} 元</p>
          </div>
        </div>
      </div>
      <!-- 新品首发 -->
      <div class="new">
        <h1>周一周四 · 新品首发</h1>
        <div
          class="new_img"
          v-for="(v, k) in newGoodsList"
          :key="k"
          @click="detail(v.id)"
        >
          <img :src="v.list_pic_url" alt="" />
          <div class="new_content">
            <p class="p1">{{ v.name }}</p>
            <p class="p2">{{ v.retail_price.toFixed(2) }}</p>
          </div>
        </div>
      </div>
      <!-- 人气推荐 -->
      <div class="people">
        <h1>人气推荐</h1>
        <van-card
          v-for="(v, k) in hotGoodsList"
          :key="k"
          :price="' ' + v.retail_price + ' 元'"
          :desc="v.goods_brief"
          :title="v.name"
          :thumb="v.list_pic_url"
        />
      </div>
      <!-- 专题精选 -->
      <div class="special">
        <h1>专题精选</h1>
        <van-swipe :loop="false" :width="300">
          <van-swipe-item v-for="(v, k) in topicList" :key="k">
            <img :src="v.item_pic_url" alt="" width="100%" />
            <div class="s_content">
              <p class="p1">
                {{ v.title }} &nbsp;&nbsp;<span
                  >¥ {{ v.price_info.toFixed(2) }}
                </span>
                &nbsp;&nbsp;···
              </p>
              <p class="p2">{{ v.subtitle }}</p>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 居家 -->
      <div class="new home" v-for="(v, k) in categoryList" :key="k">
        <h1>{{ v.name }}</h1>
        <div
          class="new_img h_img"
          v-for="(v, k) in v.goodsList"
          :key="k"
          @click="no"
        >
          <img :src="v.list_pic_url" alt="" />
          <div class="new_content h_content">
            <p class="p1">{{ v.name }}</p>
            <p class="p2">{{ v.retail_price.toFixed(2) }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索框遮盖层 -->
    <transition name="slide">
      <router-view></router-view>
    </transition>
    <!-- 底部导航 -->
    <apptabbar />
  </div>
</template>

<script>
import apptabbar from "@/components/AppTabbar";
import SearchPopup from "@/views/SearchPopup.vue";
import { GetHomeList } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      banner: [],
      channel: [],
      newGoodsList: [],
      hotGoodsList: [],
      brandList: [],
      topicList: [],
      categoryList: [],
      bool: true,
      id: [],
    };
  },
  created() {
    this.bool = this.$route.name === "Home";
    // 轮播图
    GetHomeList().then((res) => {
      let {
        banner,
        channel,
        newGoodsList,
        hotGoodsList,
        brandList,
        topicList,
        categoryList,
      } = res.data;
      this.banner = banner; //轮播
      this.channel = channel; //导航图标
      this.newGoodsList = newGoodsList; //新品
      this.hotGoodsList = hotGoodsList; //热门
      this.brandList = brandList; //品牌
      this.topicList = topicList;
      this.categoryList = categoryList;

      // console.log(this.channel);
    });
  },
  methods: {
    // 404
    no() {
      this.$router.push("/lo");
    },
    jumpTo() {
      this.bool = false;
      this.$router.push("/home/SearchPopup");
    },
    fun(id) {
      this.$router.push({
        path: "/Kind",
        query: {
          id: id,
        },
      });
    },
    // 商品详情
    detail(id) {
      this.$router.push({
        path: "/Details",
        query: {
          id: id,
        },
      });
    },
    // 品牌制造商
    brand(id) {
      this.$router.push({
        path: "/Brand",
        query: {
          id: id,
        },
      });
    },
  },
  watch: {
    $route: {
      handler(url) {
        this.bool = url.name === "Home";
      },
    },
  },
  name: "Home",
  components: {
    SearchPopup,
    apptabbar,
  },
};
</script>
<style lang="less" scoped>
.slide-enter {
  right: -100%;
}
.slide-enter-active {
  transition: all 0.3s;
}
.slide-enter-to {
  right: 0;
}
.slide-leave {
  right: 0;
}
.slide-leave-active {
  transition: all 0.3s;
}
.slide-leave-to {
  right: -100%;
}
.home {
  background-color: #efefef;
}
//
.van-swipe-item {
  img {
    height: 1.66rem;
  }
}
// 品牌制造商直供
.brand {
  margin: 0.2rem 0;
  background-color: #fff;
  height: 2.85rem;
  h1 {
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    font-size: 0.2rem;
  }
}
.b_img {
  float: left;
  margin: 0 0.02rem;
  position: relative;

  img {
    width: 1.8rem;
  }
}
.b_content {
  position: absolute;
  left: 0.12rem;
  top: 0.12rem;
  .p1 {
    font-size: 0.13rem;
    color: #333333;
  }
  .p2 {
    padding-top: 0.1rem;
    color: #8b0000;
    font-size: 0.12rem;
  }
}
// 新品首发
.new {
  background-color: #fff;
  height: 5rem;
  // margin-top: 0.5rem;
  h1 {
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    font-size: 0.2rem;
  }
  .new_img {
    float: left;
  }
  img {
    width: 1.8rem;
  }
  .new_content {
    text-align: center;
    .p1 {
      font-size: 0.13rem;
      color: #333333;
    }
    .p2 {
      padding-top: 0.1rem;
      color: #8b0000;
      font-size: 0.12rem;
    }
  }
}
// 人气推荐
.people {
  margin-top: 0.1rem;
  background-color: #fff;
  h1 {
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    font-size: 0.2rem;
  }
  .van-card__title {
    font-size: 0.16rem;
  }
  .van-card__desc {
    padding-top: 0.2rem;
  }
  .van-card__price span {
    color: #8b0000;
    font-size: 0.12rem;
  }
}
// 专题精选
.special {
  margin-bottom: 0.2rem;
  .van-swipe__indicator {
    display: none;
  }
  margin-top: 0.2rem;
  background-color: #fff;
  h1 {
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    font-size: 0.2rem;
  }
  .van-swipe-item {
    margin: 0 0.1rem;
    .s_content {
      padding-top: 0.1rem;
      .p1 {
        font-size: 0.16rem;
        font-weight: 500;
        span {
          color: #8b0000;
        }
      }
      .p2 {
        font-size: 0.12rem;
        padding-top: 0.1rem;
      }
    }
  }
}
// 居家
.h_img {
  height: 3rem;
  .h_content {
    .p1 {
      width: 1.8rem;
    }
  }
}
</style>
